<template>
  <div class="">
    <el-form :inline="true">
      <div style="display: flex; justify-content: space-between;">
        <div>
          <el-form-item>
            <el-input v-model="key" clearable placeholder="地址" style="width: 500px;" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="init">查询</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div>
      <el-tree ref="tree" :data="authList" :props="props" node-key="userid" default-expand-all>
        <div class="custom-tree-node" slot-scope="{ node, data }" style="font-size: 16px;">
          <template v-if="data.username == ''">
            <span>【上级】 【无】</span>
          </template>
          <template v-else>
            <div>
              <span class="span_tree" v-if='data.username == key'>【自己】{{ node.label }}</span>
              <span class="span_tree" v-else>【{{ data.index == 0?'上级':'直推' }}】{{ node.label }}  </span>
              <span class="span_tree">【姓名：{{ data.truename }}】 </span>
              <span class="span_tree">【手机号：{{ data.phone }}】 </span>
              <span class="span_tree">【服务商身份：{{ data.dlsStr }}】 </span>
              <span class="span_tree">【标签: {{ data.tag }}】 </span>
              <span class="span_tree">【会员等级: {{ data.uLevelStr }}】 </span>
            </div>
          </template>
          <div class="flex" v-if="data.username != ''">
            <el-button type="text" @click="() => handleNodeClick(data)">
              查看此用户
            </el-button>
            <i style="color: #409EFF;" class="el-icon-d-arrow-right"></i>
          </div>
        </div>
      </el-tree>

    </div>
  </div>
</template>

<script>
import { GetUserTeam } from '@/api/users'
import { GetEnum } from "@/api/ctrls.js";
export default {
  name: 'Name',
  data() {
    return {
      // 筛选参数
      key: '', // 用户名

      // 列表
      listLoading: false,// 列表加载中
      tableData: [],
      totalCount: 0,
      PageIndex: 1,
      pageSize: 10000,

      optionsDls: {},
      hhrInfo: {},

      authList: [],
      props: {
        label: 'username',
        children: 'children'
      },
    }
  },
  watch: {
    PageIndex(val) {
      this.getData()
    },
    pageSize(val) {
      this.getData()
    }
  },
  created() {
    this.key = this.$route.query.useraddress || 'root'
  },
  async mounted() {
    if (this.key != '') {
      this.getData()
    }
    this.GetEnum();

  },
  methods: {
    /////////////////////////////////////////////////// 初始化 ////////////////////////////////////////////////
    /**列表刷新加载 */
    async init() {
      this.PageIndex = 1;
      this.getData();
    },
    // 点击事件
    handleNodeClick(data) {
      console.log(data);
      if (data.username != '') {
        this.key = data.username;
        this.getData();
      }
    },
    /////////////////////////////////////////////////// 数据请求 ////////////////////////////////////////////////
    /**获取主列表 */
    async getData() {
      this.listLoading = true
      const { list, totalCount, success, msg } = await GetUserTeam({
        username: this.key,
        PageIndex: this.PageIndex,
        PageSize: this.pageSize
      })
      this.totalCount = totalCount
      if (list) {
        this.authList = [];
        list.forEach((item, index) => {
          item.ctime = item.ctime.replace('T', ' ')
          if (index == 0) {
            this.authList[0] = item;
            this.authList[0].children = [];
            this.authList[0].index = index;
          } else if (index == 1) {
            this.authList[0].children[0] = item;
            this.authList[0].children[0].children = [];
            this.authList[0].children[0].index = index;
          } else {
            this.authList[0].children[0].children.push(item);
          }
        });
      }
      // console.log('主列表，', list)
      console.log('树形列表，', this.authList)
      this.listLoading = false
    },
    // 获取枚举
    async GetEnum() {
      const res = await GetEnum();
      this.optionsDls = res.data['dls'];
      this.hhrInfo = res.data['hhr'];
    },
  }
}
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.el-table .warning-row {
  background: oldlace;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 15px;

}

.span_tree{
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  white-space: nowrap;
}
</style>
